<!--
 * @FilePath: index.vue
 * @Author: 杜芬
 * @Date: 2022-05-27 09:03:47
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-03-05 15:25:09
 * Copyright: 2022 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 页面
-->
<template>
  <div class="time">
    <h2>动态添加类</h2>
    <div class="box" :class="{ pink: true, big: true }">123456</div>
    <div class="box" :class="['pink', 'big']">123456</div>
    <ul>
      <li
        v-for="(item, index) in list"
        :key="item.id"
        :class="{ active: index === activeIdex }"
        @click="activeIdex = index"
      >
        {{ item.name }}--{{ index }}
      </li>
    </ul>
    <div>list里一共有 {{ isTotal }}个</div>
    <h2>计算属性</h2>
    <div>
      <span>性：<el-input v-model="val1" type="text" style="width: 80px" /></span>
      <span>名：<el-input v-model="val2" type="text" style="width: 80px" /></span>
      <!-- <span>={{ val1 + val2 }}</span> -->
      <span> = {{ fullName }}</span>
      <br>
      <el-button type="success" @click="changeName">改名卡</el-button> <br>
    </div>
  </div>
</template>

<script>
// const now = new Date(); // 时间
export default {
  data() {
    return {
      val1: '赵',
      val2: '高',
      activeIdex: 0,

      list: [
        { num: 1, id: '1', name: '嬴政' },
        { num: 1, id: '2', name: '赵姬' },
        { num: 1, id: '3', name: '卫子夫' },
        { num: 1, id: '4', name: '赵高' },
        { num: 1, id: '5', name: '姬发' }
      ]
    }
  },
  // 计算属性
  computed: {
    isTotal() {
      // 需求对 this.list 数组里面的num 进行求和 - reduce
      const total = this.list.reduce((sum, item) => sum + item.num, 0)
      return total
    },
    //
    fullName: {
      get() {
        // 当changeName计算属性，获取求值时执行get  （有缓存的优先执行缓存的）
        // 将返回值作为求值的结果
        return this.val1 + this.val2
      },
      // 当数据被修改时触发set函数
      set(value) {
        // value.slice(0, 1); // 从下标0开始，截取1个字符
        // value.slice(1); // 从下标1开始，截取1后面的全部字符
        // console.log(value.slice(0, 1));
        // console.log(value.slice(1));
        console.log(value)
        this.val1 = value.slice(0, 1)
        this.val2 = value.slice(1)
      }
    }
  },
  created() {},
  methods: {
    changeName() {
      this.fullName = '王中王'
    }
  }
}
</script>

<style lang="scss" scoped>
.time {
  width: 100%;
  height: 100%;
  border: 1px solid red;

  .box {
    width: 250px;
    height: 250px;
    margin: 10px 0;
  }
}
.pink {
  background-color: pink;
}
.big {
  // background-color: green;
  width: 300px;
  height: 300px;
  border: 1px solid green;
}
ul {
  display: flex;
}
ul li {
  list-style: none;
  margin: 10px 1px;
  width: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid rgb(128, 0, 43);
  font-size: 14px;
}
.active {
  background-color: red;
}
</style>
